<style scoped >
    .order h4{
        padding: 0 15px;
        line-height: 33px;
        border: 1px solid #e5eaee;
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#f5f5f5));
    }
    .order h4 .ordertitle{
        color: #37b3b3;
        font-weight: normal;
        font-size: 14px;
    }
    .order .orderbody .ordermana{
        padding: 15px 16px 20px;
    }
    .order .orderbody .ordermana .footer{text-align: center;}
    .order .orderbody .ordermana .footer .save{
        width: 80px;
        background: #37b3b3;
        border: 1px solid #37b3b3;
        color: #ffffff;
    }
    .order .orderbody .ordermana .footer .save:hover{background: #019ea3;}
    .order .orderbody .ordermana .footer .clear{
        width: 80px;
        background: #c7cdcd;
        border:1px solid #c7cdcd;
        color: #ffffff;}
    .order .orderbody .ordermana .ivu-row .ivu-col.ivu-col-span-12 .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
    .order .orderbody .ordermana .ivu-row .ivu-col.ivu-col-span-24 .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 95.5%;}
    .order .orderbody .ordermana .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-select{width: 90%;}
    .addGoodsbody .editaddOrder  .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
    .addGoodsbody .editaddOrder  .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-select{width: 90%;}
</style>
<template>
    <div class="console-product">
        <Row class="position clearfix">
            <!-- 当前位置-->
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">跨境电商</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">订单管理</span>
                </div>
            </i-col>
            <i-col class="fr">
                <span>
                  <Button @click="addOrder"><i class="iconfont cofont">&#xe649;</i> 新增</Button>
                    <Modal  class-name="popup"class="order" @on-cancel="cancelOrder('orderFormValidate')" v-model="orderModal" :mask-closable="false" width="820" >
                        <p slot="header" style="color: #eeebeb;" v-drag>
                            <span v-if="isAdd">新增订单</span>
                            <span v-if="isEdit">编辑订单</span>
                        </p>
                        <div  class="orderbody">
                            <h4>
                                <span class="ordertitle">订单详情</span>
                            </h4>
                            <div class="ordermana">
                                <Form ref="orderFormValidate" :rules="rulesOrder" :model="orderFormValidate"  label-position="left" :label-width="100">
                                    <Row>
                                        <i-col span="12" v-if="isAdd">
                                            <Form-item label="运单号：">
                                                <input  v-model="billNo" v-on:change="searchBillNo(billNo)" style="width: 90%;" type="text" value="" class="ivu-input">
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="运单统一编号：" prop="seqNo">
                                                <Input v-model="orderFormValidate.seqNo" disabled ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="订单编号：" prop="orderId">
                                                <Input :disabled="disabled" v-model="orderFormValidate.orderId" type="textarea" :rows="1"></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="贸易方式：" prop="tradeMode">
                                                <Select v-model="orderFormValidate.tradeMode" >
                                                    <Option v-for="item in tradeList" :value="item.value" :key="item">{{ item.label }}</Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12"  v-if="isAdd">
                                            <Form-item label="物料物资：" prop="iswl">
                                                <Radio-group v-model="orderFormValidate.iswl">
                                                    <Radio label="0">否</Radio>
                                                    <Radio label="1">是</Radio>
                                                </Radio-group>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="进出口类型：" prop="ieFlag">
                                                <Radio-group v-model="orderFormValidate.ieFlag">
                                                    <Radio label="0">出口</Radio>
                                                    <Radio label="1">进口</Radio>
                                                </Radio-group>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="币制：" prop="currCode">
                                                <Select v-model="orderFormValidate.currCode" clearable >
                                                    <Option v-for="option in currCodeList" :label="option.code" :value="option.code" :key="new Date()">
                                                        <span>{{option.name}}</span>
                                                        <span style="float:right;color:#ccc">{{option.code}}</span>
                                                    </Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="买方名称：" prop="buyerName">
                                                <Input v-model="orderFormValidate.buyerName" ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="买方证件类型：" prop="buyerCertType">
                                                <Select v-model="orderFormValidate.buyerCertType">
                                                    <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="买方证件号：" prop="buyerCertId">
                                                <Input v-model="orderFormValidate.buyerCertId" ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="买方国家：" prop="buyerCountry">
                                                <Select id="buyerCountry" v-model="orderFormValidate.buyerCountry" :label="orderFormValidate.buyerCountry" clearable filterable remote :remote-method="remoteCountry" :loading="loadingCountry">
                                                    <Option v-for="option in autoList" :label="option.code" :value="option.code" :key="new Date()">
                                                        <span>{{option.name}}</span>
                                                        <span style="float:right;color:#ccc">{{option.code}}</span>
                                                    </Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="买方电话：" prop="buyerTel">
                                                <Input v-model="orderFormValidate.buyerTel" ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="24">
                                            <Form-item label="收货地址：" prop="deliveryAddr">
                                                <Input v-model="orderFormValidate.deliveryAddr"  type="textarea" :rows="1"></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="电商平台：" prop="ebPlatId">
                                                <Select v-model="orderFormValidate.ebPlatId" >
                                                    <Option v-for="item in platformList" :value="item.value" :key="item">{{ item.label }}</Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="商户代码：" prop="ebCode">
                                                <Input v-model="orderFormValidate.ebCode" ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="商户名称：" prop="ebName">
                                                <Input v-model="orderFormValidate.ebName" ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12">
                                            <Form-item label="商品总运费：" prop="totalFreight">
                                                <Input v-model="orderFormValidate.totalFreight" ></Input>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12" v-if="isAdd">
                                            <Form-item label="商品名称：" prop="codeTs">
                                                <Select v-model="orderFormValidate.codeTs" filterable @on-change="selectaddCodeTs" label-in-value placement="top">
                                                    <Option v-for="item in GNameList" :value="item.code" :key="item">{{ item.name }}</Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                        <i-col span="12" v-if="isAdd">
                                            <Form-item label="单位：" prop="gUnit">
                                                <Select id="gUnit" v-model="orderFormValidate.gUnit" clearable filterable remote :remote-method="remoteGUnit" :loading="loadingCountry" >
                                                    <Option v-for="option in gUnitList" :label="option.code" :value="option.code" :key="new Date()">
                                                        <span>{{option.name}}</span>
                                                        <span style="float:right;color:#ccc">{{option.code}}</span>
                                                    </Option>
                                                </Select>
                                            </Form-item>
                                        </i-col>
                                    </Row>
                                </Form>
                                <div class="footer">
                                    <Button class="save" v-if="isAdd" :loading="modal_loading" @click="addSaveOrder('orderFormValidate')">保存</Button>
                                    <Button class="clear" v-if="isAdd" @click="clearOrder('orderFormValidate')">清空</Button>
                                    <Button class="save" v-if="isEdit" :loading="modal_loading" @click="editSaveOrder('orderFormValidate')">保存</Button>
                                </div>
                            </div>
                            <h4 v-if="isEdit">
                                <span class="ordertitle">商品信息</span>
                                <span class="fr" style="font-weight: normal">
                                    <span style="cursor: pointer;" @click="addGoods"><i class="iconfont cofont">&#xe649;</i> 新增&nbsp;&nbsp;</span>
                                    <Modal class-name="popup" v-model="goodsModal" class="addGoodsbody" width="820" @on-cancel="cancelGoods('goodsListForm')" :mask-closable="false" >
                                        <p slot="header" style="color: #eeebeb" v-drag>
                                            <span v-if="isGoodsAdd">新增商品信息</span>
                                            <span v-if="isGoodsEdit">编辑商品信息</span>
                                        </p>
                                        <div class="editaddOrder">
                                            <Form ref="goodsListForm" :model="goodsListForm" :rules="rulesGoods" :label-width="80" label-position="left">
                                                <Row>
                                                    <i-col span="12">
                                                        <Form-item label="商品名称：" prop="gName">
                                                            <Select v-model="goodsListForm.codeTs" @on-change="selectCodeTs" label-in-value>
                                                                <Option v-for="item in GNameList" :value="item.code" :key="item">{{ item.name }}</Option>
                                                            </Select>
                                                        </Form-item>
                                                    </i-col>
                                                    <i-col span="12">
                                                        <Form-item label="商品描述：" prop="gDesc">
                                                            <Input v-model="goodsListForm.gDesc"></Input>
                                                        </Form-item>
                                                    </i-col>
                                                    <!--<i-col span="12">
                                                        <Form-item label="规格型号：" prop="gModel">
                                                            <Input v-model="goodsListForm.gModel"></Input>
                                                        </Form-item>
                                                    </i-col>-->
                                                    <i-col span="12">
                                                        <Form-item label="单价：" prop="price">
                                                            <Input v-model="goodsListForm.price"></Input>
                                                        </Form-item>
                                                    </i-col>
                                                    <i-col span="12">
                                                        <Form-item label="数量：" prop="gNum">
                                                            <Input v-model="goodsListForm.gNum"></Input>
                                                        </Form-item>
                                                    </i-col>
                                                    <i-col span="12">
                                                        <Form-item label="计量单位：" prop="gUnit">
                                                            <Select id="gUnit" :label="goodsListForm.gUnit" v-model="goodsListForm.gUnit" clearable filterable remote :remote-method="remoteGUnit" :loading="loadingCountry" >
                                                                <Option v-for="option in gUnitList" :label="option.code" :value="option.code" :key="new Date()">
                                                                    <span>{{option.name}}</span>
                                                                    <span style="float:right;color:#ccc">{{option.code}}</span>
                                                                </Option>
                                                            </Select>
                                                        </Form-item>
                                                    </i-col>
                                                    <!--<i-col span="12">
                                                        <Form-item label="运费：" prop="freight">
                                                            <Input v-model="goodsListForm.freight"></Input>
                                                        </Form-item>
                                                    </i-col>-->
                                                    <i-col span="12">
                                                        <Form-item label="币制：" prop="currCode">
                                                            <Select v-model="goodsListForm.currCode" clearable >
                                                                <Option v-for="option in currCodeList" :label="option.code" :value="option.code" :key="new Date()">
                                                                    <span>{{option.name}}</span>
                                                                    <span style="float:right;color:#ccc">{{option.code}}</span>
                                                                </Option>
                                                            </Select>
                                                        </Form-item>
                                                    </i-col>
                                                    <i-col span="12" v-if="isGoodsEdit">
                                                        <Form-item label="商品编码：" prop="codeTs">
                                                            <Input disabled v-model="goodsListForm.codeTs"></Input>
                                                        </Form-item>
                                                    </i-col>
                                                </Row>
                                            </Form>
                                        </div>
                                        <div slot="footer">
                                            <div class="footer">
                                                <Button class="save" v-if="isGoodsAdd" :loading="modal_loading" @click="addSaveGoods('goodsListForm')">保存</Button>
                                                <Button class="save" v-if="isGoodsEdit" :loading="modal_loading" @click="editSaveGoods('goodsListForm')">保存</Button>
                                            </div>
                                        </div>
                                    </Modal>
                                </span>
                            </h4>
                            <div class="ordermana" v-if="isEdit">
                                <Table stripe border :columns="goodsListColumns" ref="goodsListData" :data="goodsListData"></Table>
                            </div>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
                <span>
                    <Button  @click="exportorderData()"><i class="iconfont cofont">&#xe647;</i> 批量生成报文</Button>
                </span>
            </i-col>
        </Row>
        <!-- 新增和导出结束-->
        <div class="datatable console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <!-- 搜索-->
            <div class="data">
                <Form class="searchform" ref="orderForm" :model="orderForm" inline>
                    <Form-item label="订单号：" :label-width="60" style="width: 175px">
                        <Input v-model="orderForm.orderId" @on-enter="orderFormSearch"></Input>
                    </Form-item>
                    <Form-item label="创建时间：" :label-width="75" style="width: 275px">
                        <Date-picker type="daterange" :options="createTime0ptions" placement="bottom-start" v-model="orderForm.date" style="width: 200px;"></Date-picker>
                    </Form-item>
                    <Form-item>
                        <Button class="search" @click="orderFormSearch">搜索</Button>
                    </Form-item>
                </Form>
            </div>
            <!-- 表格-->
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" @on-selection-change="selectChange" stripe border :columns="orderColumns" ellipsis :data="orderData" ref="ordertable"></Table>
            <Modal v-model="delModal" class-name="delect" width="250" @on-cancel="delCancel" :mask-closable="false" >
                <p slot="header" style="color: #eeebeb" v-drag>
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                </p>
                <div slot="footer">
                    <div class="footer">
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                        <Button class="clear" @click="delCancel">取消</Button>
                    </div>
                </div>
            </Modal>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    // 导入要用到的子组件
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {
            Loading
        },
        data () {
            const validateZS = (rule, value, callback) => {
                var re =  /^[1-9]\d*$/;
                if (re.test(value)) {
                    callback();
                } else {
                    callback(new Error('请输入整数'));
                }
            };
            const validatenumber = (rule, value, callback) => {
                var re = /^\d+(\.\d+)?$/;
                if(value != null && value != ""){
                    if (re.test(value)) {
                        callback();
                    } else {
                        callback(new Error('请输入数字'));
                    }
                }else{
                    callback();
                }
            };
            return {
                disabled:false,
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                delModal: false,//删除弹窗
                delLoading:false,//删除
                delId:'',//删除id
                isEdit:false,
                isAdd:false,
                orderModal:false,
                modal_loading:false,
                isGoodsAdd:false,
                isGoodsEdit:false,
                goodsModal:false,
                currCodeList:[],
                loadingCurrCode:false,
                loadingCountry:false,
                autoList:[],
                orderids:'',
                billNo:'',
                //订单管理数据格式
                orderFormValidate:{//新增
                    seqNo:'',
                    orderId:'',
                    tradeMode:'0',
                    iswl:'0',
                    ieFlag:'0',
                    currCode:'502',
                    buyerName:'',
                    buyerCertType:'1',
                    buyerCertId:'',
                    buyerCountry:'',
                    buyerTel:'',
                    deliveryAddr:'',
                    ebPlatId:'CAMEO',
                    ebPlatName:'RCMTM',
                    ebCode:'3728965873',
                    ebName:'青岛酷特智能股份有限公司',
                    totalFreight:'5',
                    codeTs:'',
                    gUnit:'',
                    gName:''
                },
                //新增验证规则
                rulesOrder:{
                    seqNo:[
                        { type: 'string', max: 50, message: '运单统一编号不能大于50位', trigger: 'blur' }
                    ],
                    orderId:[
                        { required: true, message: '请输入订单编号', trigger: 'blur' }
                    ],
                    buyerName:[
                        { required: true, message: '请输入买方名称', trigger: 'blur' },
                        { type: 'string', max: 100, message: '买方名称不能大于100位', trigger: 'blur' }
                    ],
                    buyerCertId:[
                        { type: 'string', max: 50, message: '买方证件号不能大于50位', trigger: 'blur' }
                    ],
                    buyerCountry:[
                        { required: true,message: '请输入买方国家', trigger: 'change' },
                        {required: true, validator:validatenumber, trigger: 'blur'},
                        { type: 'string', max: 10, message: '买方国家不能大于10位', trigger: 'blur' }
                    ],
                    buyerTel:[
                        {required: true, message: '请输入买方电话', trigger: 'blur'},
                        { type: 'string', max: 20, message: '买方电话不能大于20位', trigger: 'blur' }
                    ],
                    deliveryAddr:[
                        { required: true, message: '请输入收货地址', trigger: 'blur' },
                        { type: 'string', max: 500, message: '收货地址不能大于500位', trigger: 'blur' }
                    ],
                    ebCode:[
                        { required: true, message: '请输入商户代码', trigger: 'blur' },
                        {required: true, validator:validatenumber, trigger: 'blur'},
                        { type: 'string', max: 20, message: '商户代码不能大于20位', trigger: 'blur' }
                    ],
                    ebName:[
                        { required: true, message: '请输入商户名称', trigger: 'blur' },
                        { type: 'string', max: 50, message: '商户名称不能大于50位', trigger: 'blur' }
                    ],
                    totalFreight:[
                        { required: true, message: '请输入商品总运费', trigger: 'blur' },
                        {required: true, validator:validatenumber, trigger: 'blur'},
                        { type: 'string', max: 50, message: '商品总运费不能大于50位', trigger: 'blur' }
                    ],
                    gName:[
                        { required: true, message: '请选择商品名称', trigger: 'change' },
                        { type: 'string', max: 50, message: '商品名称不能大于50位', trigger: 'blur' }
                    ],
                    gUnit:[
                        { required: true, message: '请输入商品单位', trigger: 'blur' },
                        { type: 'string', max: 50, message: '商品单位不能大于50位', trigger: 'blur' }
                    ],
                    codeTs:[
                        { required: true, message: '请输入商品编码', trigger: 'change' },
                        { type: 'string', max: 50, message: '商品编码不能大于50位', trigger: 'blur' }
                    ]
                },
                //贸易方式
                tradeList:[
                    {value:'0',label:'一般贸易'},
                    {value:'1',label:'保税贸易'}
                ],
                //证件类型
                typeList:[
                    {value:'1',label:'身份证'},
                    {value:'2',label:'军官证'},
                    {value:'3',label:'护照'}
                ],
                //电商平台
                platformList:[
                    {value:'CAMEO',label:'RCMTM'},
                ],
                //商品信息编码
                GNameList:[],
                //币制列表
                gUnitList:[],
                //买方国家
                buyerCountryList:[],
                orderForm: {//订单管理条件查询
                    orderId: '',
                    date: [new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()]
                },
                createTime0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                //订单管理数据格式
                orderColumns:[
                    {
                        width:'3%',
                        type:'selection'
                    },
                    {
                        width:'3%',
                        title:'序号',
                        type:'index'
                    },
                    {
                        width:'9%',
                        title:'订单号',
                        key:'orderId',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.orderId,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.orderId)]);
                        }
                    },
                    {
                        width:'12%',
                        title:'海关编号',
                        key:'seqNo',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.seqNo,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.seqNo)]);
                        }
                    },
                    {
                        width:'6%',
                        title:'贸易方式',
                        key:'tradeMode',
                        render: (h, params) => {
                            var text = params.row.tradeMode == 0 ? '一般贸易' : '保税贸易';
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'5%',
                        title:'总货款',
                        key:'totalPayment',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.totalPayment,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.totalPayment)]);
                        }
                    },
                    {
                        width:'5%',
                        title:'总运费',
                        key:'totalFreight',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.totalFreight,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.totalFreight)]);
                        }
                    },
                    {
                        width:'10%',
                        title:'收货人',
                        key:'buyerName',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.buyerName,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.buyerName)]);
                        }
                    },
                    {
                        width:'3%',
                        title:'国家',
                        key:'buyerCountry',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.buyerCountry,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.buyerCountry)]);
                        }
                    },
                    {
                        width:'6%',
                        title:'平台名称',
                        key:'ebPlatName',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.ebPlatName,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.ebPlatName)]);
                        }
                    },
                    {
                        width:'5%',
                        title:'备注',
                        key:'note',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.note,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.note)]);
                        }
                    },
                    {
                        width:'3%',
                        title:'状态',
                        key:'state',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.returnDesc,
                                }
                            }, [params.row.returnCode != "0" ? h('i', {
                                class: 'iconfont icon-chahao',
                                style:{
                                    color: '#f76165'
                                }
                            }):h('i', {
                                class: 'iconfont icon-duihao',
                                style: {
                                    color: '#37b3b3'
                                }
                            })]);
                        }
                    },
                    {
                        width:'10%',
                        title:'创建时间',
                        key:'createTime',
                        render: (h, params) => {
                            const text = params.row.createTime != null ? new Date(params.row.createTime).format('yyyy-MM-dd hh:mm:ss') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'20%',
                        title:'操作',
                        key:'operation',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editOrder(params.row.orderId)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.delOrder(params.row.orderId)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ]),
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.exportInvoice(params.row.orderId)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-iconfontdocument1'
                                        }),
                                        h("span",'生成报文')
                                    ])
                            ]);
                        }
                    }
                ],
                orderData:[],
                //编辑订单表格数据
                goodsListColumns:[
                    {
                        width:40,
                        title:'序号',
                        type:'index'
                    },
                    {
                        width:100,
                        title:'商品编码',
                        key:'codeTs',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.codeTs
                                }
                            }, [h('span', params.row.codeTs)]);
                        }
                    },
                    {
                        width:100,
                        title:'商品名称',
                        key:'gName',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gName
                                }
                            }, [h('span', params.row.gName)]);
                        }
                    },
                    {
                        width:120,
                        title:'商品描述',
                        key:'gDesc',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gDesc
                                }
                            }, [h('span', params.row.gDesc)]);
                        }
                    },
                    /*{
                        width:73,
                        title:'规格型号',
                        key:'gModel',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gModel
                                }
                            }, [h('span', params.row.gModel)]);
                        }
                    },*/
                    {
                        width:40,
                        title:'数量',
                        key:'gNum',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gNum
                                }
                            }, [h('span', params.row.gNum)]);
                        }
                    },
                    {
                        width:60,
                        title:'计量单位',
                        key:'gUnit',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gUnit
                                }
                            }, [h('span', params.row.gUnit)]);
                        }
                    },
                    {
                        width:60,
                        title:'单价',
                        key:'price',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.price
                                }
                            }, [h('span', params.row.price)]);
                        }
                    },
                    /*{
                        width:60,
                        title:'运费',
                        key:'freight',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.freight
                                }
                            }, [h('span', params.row.freight)]);
                        }
                    },*/
                    {
                        width:40,
                        title:'币制',
                        key:'currCode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.currCode
                                }
                            }, [h('span', params.row.currCode)]);
                        }
                    },
                    {
                        width:60,
                        title:'操作',
                        key:'id',
                        render: (h, params) => {
                            return h('div', [
                                h('span',
                                    {
                                        style:{
                                            cursor:"pointer",
                                            color:"#37b3b3"
                                        },
                                        on: {
                                            click: () => {
                                                this.editGoods(params.row.id)
                                            }
                                        }
                                    },'编辑')
                            ]);
                        }
                    }
                ],
                goodsListData:[],//商品信息数据
                //编辑中新增数据
                goodsListForm:{
                    dutyMode:'',
                    ebPlatId:'',
                    fabricNo:'',
                    orderId:'',
                    orderSeqNo:'',
                    originCountry:'',
                    gNo:'',
                    gName:'',
                    codeTs:'',
                    gDesc:'',
                    gModel:'',
                    price:'',
                    gNum:'',
                    gUnit:'',
                    freight:'',
                    currCode:''
                },
                //编辑中新增验证规则
                rulesGoods:{
                    gName:[
                        { required: true, message: '请选择商品名称', trigger: 'change' }
                    ],
                    price:[
                        { required: true, message: '请输入单价', trigger: 'blur' },
                        {required: true, validator:validatenumber, trigger: 'blur'}

                    ],
                    gNum:[
                        { required: true, message: '请输入数量', trigger: 'blur' },
                        {required: true, validator:validateZS, trigger: 'blur'}

                    ],
                    gUnit:[
                        { required: true, message: '请输入计量单位', trigger: 'change' }
                    ]/*,
                    freight:[
                        {type: "string", validator:validatenumber, trigger: 'blur'}
                    ]*/
                }
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize=20;
            }
            this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
            axios.get('/dict/4').then(res => {
                this.currCodeList=res.data;
            }).catch(err =>{
            });
            axios.get('/dict/1').then(res => {
                this.GNameList=res.data;
            }).catch(err =>{
            });
        },
        mounted() {
            $(".orderbody").scroll(function() {
                if(sessionStorage.getItem("orderbodyScrollTop") == "YES"){
                    $('.orderbody').animate({ scrollTop: 0 }, 1);
                    sessionStorage.setItem("orderbodyScrollTop","NO");
                };

                $(".ivu-select-dropdown").each(function () {
                        var arr = $(this).attr("style").split(";");
                        for(var i in arr){
                            if(arr[i].indexOf("top:") != -1){
                                arr.splice(i,1);
                            }
                        }
                        $(this).attr("style",arr.join(";"));
                })
            });
        },
        methods: {
            //查询商品信息数据
            goodsListTableData() {
                this.$http.get('/src/mock/goodsList.json').then(data => {
                    this.goodsListData = data.body.data;
                }, response => {
                    // error callback
                });
            },
            //查询订单数据，条件，当前页，每页显示多少条
            orderTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var orderId = formData.orderId;//订单号
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.date.length != 0  && formData.date[0] != null && formData.date[1] != null){
                    var fromDateTime = (new Date(formData.date[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.date[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        orderId : orderId,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/orderheads',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.orderData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })

            },
            //条件查询
            orderFormSearch () {
                this.currentPage = 1;
                this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
            },
            //根据ID删除权限管理列表
            delOrder(column){
                this.delModal=true;
                this.delId = column;
            },
            delOK(){
                this.delLoading = true;
                axios.delete('/orderheads/'+this.delId).then(res => {
                    this.delModal=false;
                    this.delLoading = false;
                    this.delId = '';
                    this.$Message.success('删除成功');
                    this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                    this.delLoading = false;
                })
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            },
            //单选 全选
            selectChange(selection) {
                var orderidList = "";
                for(var index in selection){
                    orderidList += selection[index].orderId + ",";
                }
                if(orderidList.length > 0) {
                    orderidList = orderidList.substring(0, orderidList.length-1);
                }
                this.orderids = orderidList;
            },
            //导出所有数据
            exportorderData(){
                if(this.orderids == ""){
                    this.$Message.error('请至少选择一个!');
                }else{
                    axios.get('/orderheads/'+this.orderids+'/xmls').then(res => {
                        this.$Message.success('批量生成报文成功');
                    }).catch(err =>{
                    })
                }
            },
            exportInvoice (orderid) {
                axios.get('/orderheads/'+orderid+'/xml').then(res => {
                    this.$Message.success('生成报文成功');
                }).catch(err =>{
                })
            },
            //新增
            addOrder(){
                this.orderFormValidate={
                    seqNo:'',
                    orderId:'',
                    tradeMode:'0',
                    iswl:'0',
                    ieFlag:'0',
                    currCode:'502',
                    buyerName:'',
                    buyerCertType:'1',
                    buyerCertId:'',
                    buyerCountry:'',
                    buyerTel:'',
                    deliveryAddr:'',
                    ebPlatId:'CAMEO',
                    ebPlatName:'RCMTM',
                    ebCode:'3728965873',
                    ebName:'青岛酷特智能股份有限公司',
                    totalFreight:'5',
                    codeTs:'',
                    gUnit:'',
                    gName:''
                };
                this.orderFormValidate.ieFlag = "0";
                this.isAdd = true;
                this.disabled = false;
                this.orderModal = true;
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                $(".orderbody").scroll();
            },
            //编辑
            editOrder (column) {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                axios.get('/orderheads/'+column).then(res => {
                    this.orderFormValidate=res.data;
                    if(res.data.ieFlag == "E"){
                        this.orderFormValidate.ieFlag = "0";
                    }else{
                        this.orderFormValidate.ieFlag = "1";
                    }
                    this.orderFormValidate.totalFreight=res.data.totalFreight.toString();
                    if (this.orderFormValidate.buyerCountry !== '') {
                        this.loadingCountry = true;
                        axios.get('/dict/2/'+this.orderFormValidate.buyerCountry).then(res => {
                            this.loadingCountry = false;
                            this.autoList  = res.data;
                        }).catch(err =>{
                        })
                    } else {
                        this.autoList  = [];
                    }
                }).catch(err =>{
                });
                axios.get('/orderheads/'+column+'/goods').then(res => {
                    this.goodsListData=res.data;
                    this.isEdit = true;//编辑
                    this.orderModal = true;//新增
                    this.disabled = true;
                    /*setTimeout(() => {
                        $("#buyerCountry .ivu-icon-ios-close").click();
                        $("#buyerCountry .ivu-select-input").click();
                        $("#buyerCountry .ivu-select-item-selected").click();
                        $("#buyerCountry .ivu-select-item").click();
                    }, 1500);*/
                }).catch(err =>{
                });
            },
            //关闭弹窗
            cancelOrder(name) {
                this.orderModal = false;
                this.isAdd = false;
                this.isEdit = false;
                this.disabled = false;
                this.billNo = "";
                this.$refs[name].resetFields();
                this.goodsListData = [];
                sessionStorage.setItem("orderbodyScrollTop","YES");
            },
            //清空弹窗
            clearOrder(name) {
                this.$refs[name].resetFields();
            },
            addSaveOrder(name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.orderFormValidate.id="";
                        if(this.orderFormValidate.ieFlag == "0"){
                            this.orderFormValidate.ieFlag = "E";
                        }else{
                            this.orderFormValidate.ieFlag = "I";
                        }
                        axios.post('/orderheads', this.orderFormValidate).then(res => {
                            this.modal_loading = false;
                            //this.isAdd = false;
                            this.$Message.success('添加成功');
                            this.billNo = "";
                            if(this.orderFormValidate.ieFlag == "E"){
                                this.orderFormValidate.ieFlag = "0";
                            }else{
                                this.orderFormValidate.ieFlag = "1";
                            }
                            this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            if(this.orderFormValidate.ieFlag == "E"){
                                this.orderFormValidate.ieFlag = "0";
                            }else{
                                this.orderFormValidate.ieFlag = "1";
                            }
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            editSaveOrder(name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.orderFormValidate.ieFlag == "0"){
                            this.orderFormValidate.ieFlag = "E";
                        }else{
                            this.orderFormValidate.ieFlag = "I";
                        }
                        axios.put('/orderheads', this.orderFormValidate).then(res => {
                            this.modal_loading = false;
                            this.orderModal = false;
                            this.isEdit = false;
                            this.$Message.success('编辑成功');
                            this.billNo = "";
                            this.orderFormValidate={
                                seqNo:'',
                                orderId:'',
                                tradeMode:'0',
                                iswl:'0',
                                ieFlag:'0',
                                currCode:'502',
                                buyerName:'',
                                buyerCertType:'1',
                                buyerCertId:'',
                                buyerCountry:'',
                                buyerTel:'',
                                deliveryAddr:'',
                                ebPlatId:'CAMEO',
                                ebPlatName:'RCMTM',
                                ebCode:'3728965873',
                                ebName:'青岛酷特智能股份有限公司',
                                totalFreight:'5',
                                codeTs:'',
                                gUnit:'',
                                gName:''
                            };
                            this.orderData = this.orderTableData(this.orderForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //商品信息新增
            addGoods(){
                this.isGoodsAdd = true;
                this.goodsModal = true;
                this.goodsListForm.codeTs="";
                this.goodsListForm.orderId = this.orderFormValidate.orderId;
            },
            //商品信息编辑
            editGoods(column){
                this.isGoodsEdit=true;
                this.goodsModal=true;
                axios.get('/goods/'+column).then(res => {
                    this.goodsListForm=res.data;
                    this.goodsListForm.price=res.data.price.toString();
                    this.goodsListForm.gNum=res.data.gNum.toString();
                    this.goodsListForm.freight=res.data.freight.toString();
                }).catch(err =>{
                });
            },
            //商品信息取消按钮
            cancelGoods(name){
                this.goodsModal = false;
                this.isGoodsAdd = false;
                this.isGoodsEdit = false;
                this.$refs[name].resetFields();
            },
            //添加保存商品信息
            addSaveGoods(name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.goodsListForm.id="";
                        axios.post('/goods', this.goodsListForm).then(res => {
                            this.modal_loading = false;
                            this.goodsModal = false;
                            this.isGoodsAdd = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('添加成功');
                            axios.get('/orderheads/'+this.goodsListForm.orderId+'/goods').then(res => {
                                this.goodsListData=res.data;
                            }).catch(err =>{
                            });
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //编辑保存商品信息
            editSaveGoods(name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/goods', this.goodsListForm).then(res => {
                            this.modal_loading = false;
                            this.goodsModal = false;
                            this.isGoodsEdit = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('编辑成功');
                            axios.get('/orderheads/'+this.goodsListForm.orderId+'/goods').then(res => {
                                this.goodsListData=res.data;
                            }).catch(err =>{
                            });
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //自动补全买方国家
            remoteCountry(query){
                if (query !== '') {
                    this.loadingCountry = true;
                    axios.get('/dict/2/'+query).then(res => {
                        this.loadingCountry = false;
                        this.autoList  = res.data;
                        $("#buyerCountry .ivu-select-item-selected").click();
                    }).catch(err =>{
                    })
                } else {
                    this.autoList  = [];
                }
            },
            remoteGUnit(query){
                if (query !== '') {
                    this.loadingCountry = true;
                    axios.get('/dict/3/'+query).then(res => {
                        this.loadingCountry = false;
                        this.gUnitList  = res.data;
                    }).catch(err =>{
                    })
                } else {
                    this.gUnitList  = [];
                }
            },
            selectCodeTs(obj){
                this.goodsListForm.gName = obj.label;
            },
            selectaddCodeTs(obj){
                this.orderFormValidate.gName = obj.label;
            },
            //根据运单号查询信息
            searchBillNo(billNo){
                axios.get('/orderheads/'+billNo+'/auto').then(res => {
                    this.orderFormValidate.buyerName  = res.data.buyerName;
                    this.orderFormValidate.buyerTel  = res.data.buyerTel;
                    this.orderFormValidate.deliveryAddr  = res.data.deliveryAddr;
                }).catch(err =>{
                })
            }
        },
    }
</script>